<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jstl/core"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:fn="http://java.sun.com/jsp/jstl/functions"
              xmlns:core="http://www.contact.core.com/contacts/core/ui"
        >


    <h:form id="mail_form">
        <h:panelGroup layout="block" style="float:left">

        </h:panelGroup>
        <h:panelGroup layout="block" style="float:right">
            <h:commandButton value="#{resources.mailboxDeleteButton}" action="#{controlConversationBean.deletedConversations}"/>
            <h:commandButton value="#{resources.mailboxReadedButton}" action="#{controlConversationBean.readedConversations}"/>
            <h:commandButton value="#{resources.mailboxUnreadedButton}" action="#{controlConversationBean.unreadedConversations}"/>
        </h:panelGroup>

        <style type="text/css">
            table.noborder td {
                border: 0px;
            }
        </style>

        <rich:dataTable id="mailConversationList"
                        value="#{mailSessionBean.conversations}"
                        var="conversation"
                        rows="7"
                        style="clear:both; width:100%;"
                        styleClass="noborder"
                        onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                        onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                >
            <!--<rich:columnGroup rendered="#{not ((conversation.sender eq profileSessionBean.information.mailId) and (conversation.parentId eq null) and mailSessionBean.inbox)}">-->
                <rich:column style="cursor:pointer;"
                             width="30%"
                             filterExpression="#{(fn:containsIgnoreCase(conversation.participants,mailSessionBean.filterConversationList) or fn:containsIgnoreCase(conversation.subject,mailSessionBean.filterConversationList)) and
                                                not (mailSessionBean.inbox ? conversation.outboxOnly : conversation.inboxOnly)}"
                             label="#{resources.mailboxParticipantsLabel}"
                        >
                    <f:facet name="header">
                        <h:outputText value="#{resources.mailboxParticipantsLabel}"/>
                    </f:facet>
                    <h:panelGrid columns="2" style="vertical-align:middle;">
                        <a4j:repeat value="#{conversation.participantsBasicUserDatas}" var="basicUserData">
                            <h:panelGroup layout="block" style="float:left; margin-right: 20px;"
                                          rendered="#{basicUserData.info.mailId eq conversation.sender}">
                                <core:pictureForView informationId="#{basicUserData.info.id}"
                                                     pictureKey="photoprofile_#{basicUserData.info.id}"
                                                     style="width:40px; height:40px;"/>
                            </h:panelGroup>
                            <h:outputText value=" • "/>
                            <a4j:commandLink id="partipName"
                                             value="#{basicUserData.info.firstName}"
                                             action="#{accountBean.friendProfileByInformationId}"
                                             style="font-weight:#{conversation.readed ? 'inherit' :'bold'}; #{fn:contains(basicUserData.info.mailId, conversation.sender) ? 'color:orange;' : ''};font-size:13px; font-weight:200;">
                                <f:setPropertyActionListener value="#{basicUserData.info.id}"
                                                             target="#{accountBean.informationIdForView}"/>
                            </a4j:commandLink>
                            <rich:toolTip for="partipName" value="#{basicUserData.info.firstName} #{basicUserData.info.lastName} [#{basicUserData.info.mailId}]"/>

                        </a4j:repeat>
                    </h:panelGrid>
                </rich:column>
                <rich:column style="cursor:pointer;"
                             width="50%"
                             label="#{resources.mailboxTopicLabel}"
                        >
                    <f:facet name="header">
                        <h:outputText value="#{resources.mailboxTopicLabel}"/>
                    </f:facet>
                    <h:panelGrid columns="2">
                        <h:outputText style="font-weight:#{conversation.readed ? 'inherit' :'bold'};"
                                      value="#{conversation.subject} - "/>
                        <h:outputText style="font-weight:#{conversation.readed ? 'inherit' :'bold'};"
                                      value="#{conversation.preview}"/>
                    </h:panelGrid>
                </rich:column>
                <rich:column style="cursor:pointer; text-align:center;"
                             label="#{resources.mailboxDateLabel}"
                        >
                    <f:facet name="header">
                        <h:outputText value="#{resources.mailboxDateLabel}"/>
                    </f:facet>
                    <h:outputText style="font-weight:#{conversation.readed ? 'inherit' :'bold'};"
                                  value="#{conversation.date}">
                        <f:converter converterId="timeLapseConvertor"/>
                    </h:outputText>
                </rich:column>
                <rich:column label="#{resources.mailboxActionLabel}">
                    <f:facet name="header">
                        <h:outputText value="#{resources.mailboxActionLabel}"/>
                        <!--<h:panelGroup>-->
                            <!--<h:outputLabel for="#{rich:clientId('allCheckbox')}" value="All"/>-->
                            <!--<h:selectBooleanCheckbox id="allCheckbox"-->
                                                     <!--onclick="-->
                                                     <!--{-->
                                                        <!--for (var i = 0; i != this.form.elements.length; i++)-->
                                                        <!--{-->
                                                            <!--var elem = this.form.elements[i];-->
                                                            <!--if (elem.type=='checkbox')-->
                                                                <!--if (elem.id.indexOf('conversation_checkbox')==0)-->
                                                                    <!--elem.checked=this.checked;-->
                                                        <!--}-->
                                                     <!--}"-->
                                    <!--/>-->
                        <!--</h:panelGroup>-->
                    </f:facet>
                    <h:selectBooleanCheckbox id="conversation_checkbox" value="#{conversation.marked}"
                                             onclick="if (event.stopPropagation) event.stopPropagation(); else event.cancelBubble = true;"/>
                    <rich:toolTip for="conversation_checkbox" value="#{resources.mailboxMarkForActionTooltip}"/>

                </rich:column>
            <!--</rich:columnGroup>-->
            <f:facet name="footer">
                <rich:datascroller renderIfSinglePage="false" maxPages="10"/>
            </f:facet>

            <a4j:support reRender="massageTabs" event="onRowClick" action="#{controlConversationBean.openConversation}"
                         oncomplete="selectedTab = 'conversation_#{conversation.uniqueKey}'; RichFaces.switchTab('#{rich:clientId('massageTabs')}', selectedTab,'');">
                <f:param name="conversationKey" value="#{conversation.uniqueKey}"/>
            </a4j:support>
        </rich:dataTable>
    </h:form>
</ui:component>